<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/login/user_login.css">
    <link rel="stylesheet" href="css/login/navbar.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">登录</button>


<div id="id01" class="modal">
<!--<section id="content">-->
    <!--头部-->
    <div class="imgcontainer">
        <!-- 点击×号，隐藏模态框-->
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
    </div>
    <div class="content-header clearfix">
        <a href="javascript:;" class="current">登录</a>
        <a href="javascript:;">注册</a>
    </div>
    <!--内容-->
    <div class="content-body">
        <!-- 登录 -->
        <div class="dom" style="display: block;">
            <form action="#">
                <div class="s1">
                    <h4>账号</h4><span id="usertip" style="color: red"></span>
                    <input name="user" type="text" placeholder="用户名">
                </div>
                <div class="s1">
                    <h4>密码</h4><span id="pwdtip" style="color: red"></span>
                    <input name="pwd" type="password" placeholder="请输入密码">
                </div>
                <div class="s2">
                    <input type="checkbox" id="rem">
                    <span>记住密码</span>
                </div><span id="logintip" style="color: red"></span>
                <input type="button" class="login-btn" value="登&nbsp;录">
            </form>
            <div class="dom-footer">
                <div class="login-another">
                    <span>请联系管理员：卢桂豆</span>
                    <!--<a href="#">找回密码</a>-->
                    <span>|</span>
                    <span>还没有注册帐号?</span>
                    <a href="#">立即注册</a>
                </div>

            </div>
        </div>
        <!-- 注册 -->
        <div class="dom">
            <form action="#">

                <div class="s1">
                    <h4>用户名</h4><span id="usernametip" style="color: #31b0d5"></span>
                    <input name="user1" type="text" placeholder="中、英文均可, 最长20个字符或10个汉字">
                </div>
                <div class="s1">
                    <h4>密码</h4>
                    <input name="pwd1" type="text" placeholder="6-30位英文、数字、符号, 区分大小写">
                </div>
                <div class="s1">
                <h4>手机号码</h4><span id="phonetip" style="color: red"></span>
                <input name="phone" type="text" placeholder="填写你的手机号码作为登录账户">
                </div>
                <div class="s1 msg-code">
                    <h4>短信验证码</h4>
                    <input name="msg" type="text" placeholder="填写短信验证码">
                    <input type="button" value="获取短信验证码">
                </div>

                <input type="button" class="logon-btn" value="注&nbsp;册">
            </form>

        </div>
     </div>
    </div>
<!--</section>-->
</div>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script src="js/login/login.js"></script>
<script src="js/login/remember.js"></script>

<script>

    window.onload = function () {
        // 1.1 获取需要的标签
        var as = document.getElementsByClassName('content-header')[0].getElementsByTagName('a');
        var contents = document.getElementsByClassName('dom');

        // 1.2 遍历
        for (var i = 0; i < as.length; i++) {
            // 1.2.1 取出单个对象
            var a = as[i];
            a.id = i;

            // 1.2.2 监听鼠标的移动事件
            a.onclick = function () {
                // 让所有的a的class都清除
                for (var j = 0; j < as.length; j++) {
                    as[j].className = '';
                    contents[j].style.display = 'none';
                }

                // 设置当前a的class
                this.className = 'current';
                // 从contents数组中取出对应的标签
                contents[this.id].style.display = 'block';
            }

        }
    }
</script>

</body>
</html>